<script setup>
import {computed, nextTick, ref, watch} from "vue";
import InsertBtn from "./InsertBtn.vue";

const props = defineProps({
  headerColor: String, //头部颜色
  headerIcon: String, //头部图标
  content: String, //节点内容
  disabled: Boolean, //是否禁用，不可编辑
  modelValue: String, //节点名称,
  showBody: {
    default: true
  }
})
const enableEdit = ref(false)
const nodeNameInput = ref()
const emit = defineEmits(['update:modelValue'])
const title = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
watch(enableEdit, () => {
  if (enableEdit.value){
    nextTick(() => {
      nodeNameInput.value.focus()
    })
  }
})
</script>

<template>
  <div class="w-p-node">
    <div class="w-p-node-body" v-if="showBody" :style="{cursor: `${disabled ? 'not-allowed':'pointer'}`, '---shadowColor': headerColor}">
      <div class="w-p-node-header" :style="{'background-color': headerColor}">
        <div>
          <component v-if="!enableEdit" :is="headerIcon" size="16"/>
          <input ref="nodeNameInput" v-if="enableEdit" autofocus @blur="enableEdit = false" v-model="title"/>
          <div class="w-row-text" v-else @click="enableEdit = true">{{ title }}</div>
        </div>
        <icon-close class="w-node-del" />
      </div>
      <div class="w-p-node-content">
        <div>{{ content || '请选择' }}</div>
        <icon-right class="w-p-node-click"/>
      </div>
    </div>
    <div class="w-p-node-add">
      <insert-btn/>
    </div>
  </div>
</template>

<style scoped lang="less">
.w-p-node {
  width: @node-width;
  margin-bottom: 8px;
  .w-p-node-body {
    cursor: pointer;
    background: white;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #d8d8d8;

    .w-p-node-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: white;
      height: 25px;
      font-size: 13px;
      .w-node-del {
        display: none;
      }

      & > div {
        display: flex;
        align-items: center;

        & > div {
          margin-left: 3px;
          width: calc(@node-width - 50px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      input {
        width: calc(@node-width - 50px);
        border: none;
        border-radius: 5px;

        &:focus {
          outline: none;
        }
      }
    }

    .w-p-node-content {
      padding: 20px 5px 20px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      color: #656363;
      & > div {
        width: 92%;
        word-wrap: break-word;
      }
    }

    &:hover {
      box-shadow: 0 0 5px 0 var(---shadowColor);
      .w-node-del {
        display: inline;
      }
    }
  }

  .w-p-node-add {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: @node-line-len;

    &:before {
      position: absolute;
      content: '';
      width: 2px;
      height: @node-line-len;
      background: @node-line-color;
    }
    &:after {
      content: '';
      position: absolute;
      top: @node-line-len;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: @node-line-color transparent transparent;
    }
  }
}
</style>
